<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;padding: 0;
        }
        .box1{
            width: 800px;height: 250px;margin: 100px auto;position: absolute;
        }
        .box1 img{
            width: 100%;height: 100%;display: none;
        }
        .box2{
            width: 200px;height: 30px;position: absolute;left: 312px;top: 219px;
        }
        .box2 span{
            display: block;width: 20px;height: 20px;border-radius: 50%;background: white;
            float: left;margin-left: 13px;opacity: .5;z-index: 2;
        }
        .box1 .img1{display: block;}
    </style>
</head>
<body>
    <div class="box1">
        <img src="./imgs/banner1.jpg" alt="" class="img1">
        <img src="./imgs/banner2.jpg" alt="" class="img2">
        <img src="./imgs/banner3.jpg" alt="" class="img3">
        <img src="./imgs/banner4.jpg" alt="" class="img4">
        <img src="./imgs/banner5.jpg" alt="" class="img5">
        <div class="box2">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
    </div>
</body>
<script>
    // 获取元素
    var aimg=document.querySelectorAll(".box1 img");
    var aspan=document.querySelectorAll(".box2 span");
    var abox1=document.querySelector(".box1")
    // for(var i=0;i<aspan.length;i++){
    //     aspan[i].onmouseover=function(){
    //         this.style.background="red";
    //     }
    //     aspan[i].onmouseout=function(){
    //         this.style.background="white"
    //     }
    // }
    for(var i=0;i<aspan.length;i++){
        aspan[i].a = i;
    }

    var prev = 0;

    for(var i=0;i<aspan.length;i++){
        aspan[i].onclick = function(){
            // this就是当前点击的那个li
            // console.log(this === li[?])

            // 取消上一个按钮的样式
            aspan[prev].style.background = "white";

            // 隐藏上一个内容
            abox1[prev].style.display = "none";

            // 给当前按钮添加样式
            this.style.background = "red";

            // 显示按钮对应的内容
            abox1[this.a] = "block";

            // 将当前点击的，设置为下一次的上一个按钮            
            prev = this.a;
        }
    }



</script>
</html>